Das Erstellen responsiver Layouts ist eine häufige Herausforderung für Webentwickler. In diesem Blog untersuchen wir, wie man mit verschiedenen CSS-Techniken ein bestimmtes responsives Design erreicht, und konzentrieren uns dabei darauf, warum CSS Grid der beste Ansatz für dieses spezielle Layout ist.

Die Herausforderung

Wir müssen ein Layout erstellen, in dem:

Desktop-Ansicht:

• DIV 1 und DIV 3 stapeln sich vertikal auf der linken Seite und nehmen jeweils 50 % der linken Spalte ein.
• DIV 2 nimmt die volle Höhe der rechten Spalte ein.

Mobile Ansicht:

• Alle drei Divs werden vertikal gestapelt.

Warum Flexbox zu kurz kommt

Flexbox eignet sich hervorragend für eindimensionale Layouts, hat jedoch Probleme mit komplexen zweidimensionalen Layouts wie unserem. Hier ist der Grund:

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Probleme mit Flexbox

In diesem Flexbox-Setup:

• DIV 2 kann seine Höhe nicht automatisch an die kombinierte Höhe von DIV 1 und DIV 3 anpassen.
• Flexbox ist in erster Linie für eindimensionale Layouts (entweder Zeile oder Spalte) gedacht, nicht für komplexe zweidimensionale Anordnungen.

Die CSS-Grid-Lösung

CSS Grid zeichnet sich durch die Erstellung zweidimensionaler Layouts aus und ist daher perfekt für diese Herausforderung geeignet.

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

Erläuterung

Rasterlayout:

• Definiert ein Raster mit zwei Spalten und zwei Zeilen.
• Positioniert DIV 1 in der ersten Spalte und ersten Zeile.
• Positioniert DIV 2 in der zweiten Spalte und erstreckt sich über zwei Zeilen.
• Positioniert DIV 3 in der ersten Spalte und zweiten Zeile.

Responsives Design:

• Bei Bildschirmen mit 768 Pixeln oder schmaler wechselt das Layout zu „Flex“, sodass Elemente vertikal gestapelt werden.

Abschluss

Während sich Flexbox hervorragend für einfachere, eindimensionale Layouts eignet, bietet CSS Grid die Leistung und Flexibilität, die für komplexere, zweidimensionale Designs erforderlich ist. Durch die Verwendung von CSS Grid können wir ganz einfach das gewünschte responsive Layout mit minimalem Code und maximaler Kontrolle erreichen.

Sie können dieses Beispiel gerne an Ihre eigenen Projekte anpassen und die Vorteile der Verwendung von CSS Grid für Ihre responsiven Layouts genießen!